<template>
    <div class="myorder-box">
        <div class="order-box1">
            <span>我的订单</span>
            <router-link to='/order'>
            <span class="look-order">查看全部订单&gt;</span>
            </router-link>
        </div>
        <div class="order-box2">
            <li>
                <van-icon name="balance-list" size="30"/>
                <p>待付款</p>
            </li>
            <li>
                <van-icon name="todo-list" size="30"/>
                <p>待发货</p>
            </li>
            <li>
                <van-icon name="send-gift" size="30"/>
                <p>待收货</p>
            </li>
            <li>
                <van-icon name="comment" size="30"/>
                <p>评价</p>
            </li>
            <li>
                <van-icon name="bill" size="30"/>
                <p>退款/售后</p>
            </li>
        </div>
    </div>
</template>

<script>
export default {
    name: "MyOrder",
}
</script>

<style scoped>
    .myorder-box {
        margin: 10px 15px;
        border-radius: 10px;
        border: #858585 solid 1px;
    }
    .order-box1 {
        border-bottom: #858585 solid 1px;
        height: 35px;
        line-height: 35px;
        display: flex;
        justify-content: space-between;
        padding: 0 10px;
    }
    .order-box1 span:nth-child(1) {
        font-weight: 800;
    }
    .look-order{
        color: #858585;
        font-size: 14px;
    }
    .order-box2 {
        display: flex;
        height: 80px;
        justify-content: space-between;
        padding: 0 20px;       
    }
    .order-box2 li {
        list-style: none;
        text-align: center;
        padding-top: 15px;
    }
    .order-box2 p {
        font-size: 14px;
        color: #858585;
    }
</style>